<template>
  <goods-list-item>
<!--    <div v-if="Object.keys(goodsCommodity).length !== 0">-->
      <div class="goods" v-for="(item,index) in goodsCommodity" :key="index" @click="goodListClick(item)">
        <img :alt="item.title" :src="showItemImg(item)" @load="loadImages(item)">
        <div class="goods-info">
          <p>{{item.title}}</p>
          <span class="price">{{item.price}}</span>
          <span class="collect">{{item.cfav}}</span>
        </div>
      </div>
<!--    </div>-->
  </goods-list-item>
</template>

<script>
  import GoodsListItem from "components/content/goods/GoodsListItem";

  export default {
    name: "GoodsList",
    components: {
      GoodsListItem
    },
    props: {
      goodsCommodity: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    computed: {
      showItemImg(){
        return function(item){
          if (item.showLarge){
            return item.showLarge.img
          }else if(item.image){
            return item.image;
          }else {
            return item.img;
          }
        }
      }
    },
    methods: {
      loadImages(item){
        if (item.showLarge){
          this.$bus.$emit("scrollLoadImgs");
        }else if(item.image){
          this.$bus.$emit("scrollLoadImgsDetail");
        }else {
          this.$emit("itemImgLoad");
        }
      },
      goodListClick(data) {
        return data.iid !== undefined && data.iid ? this.$router.push('/detail/' + data.iid) : false;
      }
    }
  }
</script>

<style scoped>
  .goods {
    padding-bottom: 40px;
    position: relative;
    width: 48%;
  }
  .goods img {
    width: 100%;
  }

  .goods-info {
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
  }

  .goods-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }

  .goods-info .price {
    color: var(--color-high-text);
    margin-right: 20px;
  }

  .goods-info .collect {
    position: relative;
  }

  .goods-info .collect::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    width: 14px;
    height: 14px;
    background: url("~assets/images/home/goods/collect.svg") 0 0/14px 14px;
  }
</style>